<template>
	<view>
		<dsl-navbar title="聊过的人" bgTopImg="white" isBack></dsl-navbar>
		<view>
			<view class="flex justify-between align-center solid-bottom padding" v-for="(item,index) in messageList"
				:key='index' @click="chatMen(item)">
				<view class="flex align-center">
					<image :src="item.avatar" mode="aspectFill" class="square_image bg-gray margin-left-xs">
					</image>
					<view class="margin-left">
						<view class="square_name one_overflow">{{item.friendName ||'游客'}}</view>
						<view class="square_classify one_overflow margin-top-sm">
							{{item.content?item.content:item.createTime}}
						</view>
					</view>
				</view>
				<view class="align-center ">
					<!-- <view class="square_time one_overflow">{{item.createTime}}</view> -->
					<image src="/static/message/imgxiangji-1.png" mode="" class="square_icon"></image>
					<image src="/static/tabbar/imgxiaoxi-4.png" mode="" class="square_icon margin-left "></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				pageNum: 1, //第一页
			}
		},
		onShow() {
			this.pageNum = 1
			this.chatListMen() //消息列表
		},
		computed: {
			/**
			 * friendInfoList 好友列表
			 * user_id：用户id
			 * 
			 */
			...mapState('chat', ['messageList', 'user_id'])
		},
		methods: {
			...mapActions('chat', ['chatListApi']),
			//消息列表
			chatListMen() {
				this.chatListApi({
					userId: this.user_id,
					pageSize: 20,
					pageNum: this.pageNum,
				})
			},
			//触底
			onReachBottom(e) {
				this.pageNum++
				this.chatListMen()
			},
			chatMen(e) {
				// 消息跳转
				uni.setStorageSync('ta_id', e.taId)
				let url = e.avatar
				getApp().globalData.taAvatar = url
				uni.navigateTo({
					url: `/pages/chat/chat?avatar=${e.avatar}&taId=${e.taId}&userName=${e.userName}`
				})
			}
		}
	}
</script>

<style>
	/* 广场 */
	.square_image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.square_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.square_name {
		width: 308rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.square_classify {
		width: 308rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #B7BED8;
		opacity: 1;
	}

	.square_time {
		width: 100rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 200;
		color: #9AA2B5;
		opacity: 1;
		margin-right: 20rpx;
	}

	view {
		/* border: 1rpx solid red; */
	}
</style>
